<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>
        后台管理系统
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="../css/x-admin.css" media="all">
    <link rel="stylesheet" href="../lib/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" href="../lib/bootstrap/js/bootstrap.min.js" media="all">
</head>
<body>
<style type="text/css">
    legend {
        display: block;
        width: 100px;
        border-bottom: 0px;
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }

    legend a {
        color: #666;
    }

    legend a:hover {
        text-decoration: none;
    }

    .layui-table {
        font-family: "Microsoft YaHei", "Helvetica Neue";
    }
</style>
<div class="x-body">

    <div class="row">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-blue"><i class="fa fa-cutlery"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;"><i class="iconfont " data-icon=""></i>
                        <h1 id="t_count"></h1>
                    </a>

                    <a href="javascript:;"> <i class="iconfont " data-icon=""></i><span>空闲餐桌数</span></a>

                </div>
            </section>
        </div>
        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-yellow"><i class="fa fa-bar-chart"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;"> <i class="iconfont " data-icon=""></i>
                        <h1 id="caixi"></h1>
                    </a>
                    <a href="javascript:;"> <i class="iconfont " data-icon=""></i><span>菜系总数</span></a>
                </div>
            </section>
        </div>

        <div class="col-xs-6 col-sm-4 col-md-3">
            <section class="panel">
                <div class="symbol bgcolor-yellow-green"><i class="fa fa-cubes"></i>
                </div>
                <div class="value tab-menu" bind="1">
                    <a href="javascript:;"> <i class="iconfont " data-icon=""></i>
                        <h1 id="count"></h1>
                    </a>
                    <a href="javascript:;"> <i class="iconfont " data-icon=""></i><span>菜品总数</span></a>
                </div>
            </section>
        </div>

    </div>


    <!--相关统计-->
    <div class="row">
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">餐桌详情</div>
                <div class="panel-body">
                    <div id="container1" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
        <div class="col-sm-6">
            <section class="panel">
                <div class="panel-heading">菜系分类</div>
                <div class="panel-body">
                    <div id="container2" style="height:300px; height:350px"></div>
                </div>
            </section>
        </div>
    </div>

    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script src="../js/jquery.min.js"></script>
    <script src="../js/highcharts.js"></script>
    <script src="../js/exporting.js"></script>
    <script type="text/javascript">
        $(function () {
            var foodClass = new Array();
            var count = new Array();
            var sum = 0;
            var caixicount = 0;
            $.post("../findFoodClassAndFoodInfo.do", function (data) {
                for (var k in data) {
                    sum += data[k];
                    foodClass.push(k);
                    count.push(data[k]);
                    caixicount++;
                }
                $("#caixi").html(caixicount);
                $("#count").html(sum);
                var options = {
                    chart: {
                        type: 'column'
                    },
                    colors: ['#ff0b23'],
                    title: {
                        text: '菜系分类一览表'
                    },
                    exporting: {
                        enabled: true //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
                    },
                    credits: {  //去掉highcharts.com
                        enabled: false
                    },
                    subtitle: {
                        text: '菜系'
                    },
                    xAxis: {
                        categories: foodClass
                    },
                    yAxis: {
                        min: 0,
                        title: {
                            text: '个数'
                        }
                    },
                    series: [{
                        name: '个数',
                        data: count
                    }]
                }
                $("#container2").highcharts(options);
            }, "json");
            var tableCount = new Array();
            var tableState = new Array();
            $.post("../FindTableCount.do", function (data) {
                for (var k in data) {
                    tableState.push(k);
                    tableCount.push(data[k]);
                }
                var t_count = tableCount[1];
                $("#t_count").html(t_count);
                $("#container").highcharts(options1);
                var options1 = {
                    chart: {
                        type: 'pie'
                    },
                    title: {
                        text: '餐桌使用一览表'
                    },
                    credits: {  //去掉highcharts.com
                        enabled: false
                    },
                    colors: ['#fcff11', '#ff5099'],
                    series: [{
                        name: '餐桌使用情况',
                        data: [["占用", tableCount[0]], ["空闲", tableCount[1]]]
                    }]
                }
                $("#container1").highcharts(options1);
            }, "json")
        })
    </script>

</div>

</body>
</html>